import * as React from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import {ReactElement, useState} from 'react';
import {Icon} from '@rneui/themed';

interface TreeListItemProps {
  tree: TreeResponse;
}

// 生成随机颜色的函数
const getRandomColor = () => {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

export function TreeListItem({
  name,
  children,
}: TreeResponse): React.ReactElement<TreeListItemProps> {
  const [isExpand, setIsExpand] = useState(false);
  return (
    <View
      style={{
        padding: 20,
        backgroundColor: 'white',
        display: 'flex',
        flexDirection: 'column',
      }}>
      <TouchableOpacity
        onPress={() => setIsExpand(!isExpand)}
        activeOpacity={1}>
        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
          <Text>{name}</Text>
          <Icon name={isExpand ? 'expand-more' : 'expand-less'} />
        </View>
      </TouchableOpacity>
      {isExpand ? (
        <View style={{flexWrap: 'wrap', flexDirection: 'row'}}>
          {children.map((treeRes: TreeResChildren, index) => {
            return (
              <Text
                style={{
                  margin: 5,
                  color: getRandomColor(),
                  backgroundColor: '#eaeaea',
                  borderRadius: 999,
                  paddingHorizontal: 8,
                  paddingVertical: 4,
                }}>
                {treeRes.name}
              </Text>
            );
          })}
        </View>
      ) : null}
    </View>
  );
}
